<template>
  <div>
    <el-form ref="form" class="myform">

      <el-form-item :label="data.title" v-if="data.quesType=='TITLE'"></el-form-item>

      <el-form-item :label="data.title" v-if="data.quesType=='TEXT'|| data.quesType=='REGION'|| data.quesType=='SELECT'">
        <span style="padding: 5px 10px; border-bottom: 1px solid #ccc;">{{filterVal(data.answerValue)}}</span>
      </el-form-item>


<!--      <el-form-item :label="data.title" v-if="data.quesType=='SELECT'">-->
<!--          <el-select v-model="data.answerValue" placeholder="请选择" :disabled="true">-->
<!--            <el-option :label="sub.value" :value="sub.value" :selected="sub.selected"  v-for="sub in data.optionList"></el-option>-->
<!--          </el-select>-->
<!--      </el-form-item>-->

      <el-form-item :label="data.title" v-if="data.quesType=='RADIO'">
        <el-radio-group v-model="data.answerValue">
          <div class="item-padding">
            <template v-for="jj in data.optionList">
              <el-radio :selected="jj.selected" :label="jj.value" :disabled="true"></el-radio>
              <template v-if="jj.subQuesList && jj.relateFlag">
                <AnswerListByElement :data="kk" v-for="kk in jj.subQuesList" v-show="jj.selected"></AnswerListByElement>
              </template>
            </template>
          </div>
        </el-radio-group>
      </el-form-item>

      <el-form-item :label="data.title" v-if="data.quesType=='CHECKBOX'">
        <el-checkbox-group v-model="data.answerValue">
          <div class="item-padding">
            <template v-for="jj in data.optionList">
              <el-checkbox :label="jj.value" :disabled="true"></el-checkbox>
<!--              <template v-if="jj.subQuesList && jj.relateFlag">-->
<!--                <AnswerListByElement :data="kk" v-for="kk in jj.subQuesList" v-show="jj.selected"></AnswerListByElement>-->
<!--              </template>-->
            </template>
          </div>
        </el-checkbox-group>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  name: 'AnswerListByElement',
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  methods: {
    filterVal(val) {
      let indexOf = val?.indexOf('@')
      if(indexOf>0){
        return val.substring(indexOf+1)
      }
      return val
    }
  }
}
</script>

<style>
.myform .el-form-item__label{
  text-align: left!important;
  width: 100%;
  /*border-left: 1px #cccccc solid!important;*/
}
.myform  .el-form-item label{
  display: block!important;
  line-height: 25px;
}
</style>

<style lang="scss" scoped>
.item-padding {
  border-left: 1px solid #cccccc;
  padding: 15px 20px;
}
</style>
